<template>
  <div class="welcome-container">
    <!-- 顶部导航 -->
    <div class="header">
      <div class="logo">
        <img src="@/assets/treval/wallhaven1.png" alt="景区logo">
        <span>云南</span>
      </div>
      <el-menu 
        mode="horizontal"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="1" @click="navigateToHome">首页</el-menu-item>
        <el-menu-item index="2" @click="navigateToIntro" class="is-active">景区介绍</el-menu-item>
        <el-menu-item index="3" @click="navigateToCommend">推荐</el-menu-item>
        <el-menu-item index="4" @click="navigateToSearch">搜索</el-menu-item>
        <el-menu-item index="5">个人中心</el-menu-item>
      </el-menu>
    </div>

    <!-- 标签部分 -->
    <div class="scenic-tag-container">
      <div class="scenic-tag" v-for="tag in tags" :key="tag.id">
        <el-button>{{ tag.name }}</el-button>
      </div>
    </div>

    <!-- 景区列表改为两列布局 -->
    <div class="scenic-container">
      <!-- 左侧列表 -->
      <div class="scenic-list">
        <div class="scenic-card" v-for="scenic in scenics" :key="scenic.id">
          <img :src="scenic.image" alt="景区图片" class="scenic-image">
          <div class="scenic-info">
            <h3>{{ scenic.name }}</h3>
            <div class="card-tag-container">
                <el-tag 
                    v-for="(tag, index) in scenic.tags.slice(0,4)" 
                    :key="index"
                    type="info"
                    class="card-tag">
                    {{ tag }}
                </el-tag>
            </div>
            <el-rate 
              v-model="scenic.score"
              :max="5"
              disabled
              show-score
              score-template="{value} 分"
              :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
              class="rating-stars">
            </el-rate>
            <p>{{ scenic.description }}</p>
            <el-button type="primary" @click="viewDetails(scenic.id)">查看详情</el-button>
          </div>
        </div>
      </div>

      <!-- 新增右侧轮播 -->
      <div class="sticky-carousel">
        <div class="top-carousel">热点景区</div> <!-- 移出el-carousel -->
        <el-carousel
          :autoplay="false" 
          trigger="click"
          indicator-position="outside"
          class="custom-carousel">

          <el-carousel-item v-for="carousel in carousels" :key="carousel.id">
            <div class="carousel-card">
              <img :src="carousel.image" alt="轮播图片" class="carousel-image">
            </div>
          </el-carousel-item>
          
        </el-carousel>

        <div class="activity-carousel-container">
            <div class="top-carousel" style="top: -30px">特色活动推荐</div>
            <el-carousel
            :autoplay="true"
            height="300px"
            indicator-position="outside">
            <el-carousel-item v-for="activity in activities" :key="activity.id">  <!-- 改为使用activities -->
                <div class="carousel-card">
                    <img :src="activity.image" class="carousel-image">
                </div>
            </el-carousel-item>
            </el-carousel>
        </div>
      </div>
    </div>
</div>

</template>

<script>
// 修改导入语句
import VueCountUp from 'vue-countup-v2'

export default {
  components: {
    CountUp: VueCountUp // 使用兼容Vue2的版本
  },
  data() {
    return {
      statOptions: {
        duration: 2.5,
        useEasing: true,
        separator: ','
      },
      tags: [
        { id: 1, name: '历史文化' },
        { id: 2, name: '自然风景' },
        { id: 3, name: '古建筑' },
        { id: 4, name: '白族风情' },
        { id: 5, name: '摄影圣地' },
        { id: 6, name: '慢生活' },
        { id: 7, name: '民俗文化' },
        { id: 8, name: '世界遗产' },
        { id: 9, name: '纳西文化' },
        { id: 10, name: '酒吧街' },
        { id: 11, name: '雪山观景' },
      ],
      stats: [
        { label1: '景区面积(平方公里)', value: 1542 },
        { label1: '动植物种类', value: 4236 },
        { label1: '年接待游客', value: 1850000 },
        { label1: '遗产保护数量', value: 23 },
        // 新增四个统计项 ▼
        { label2: '文化遗址数量', value: 86 },
        { label2: '特色服务项目', value: 152 },
        { label2: '游客好评率', value: 98.7 },
        { label2: '公共设施数量', value: 3654 }
      ],
      scenics: [
        { 
          id: 1, 
          name: '大理古城', 
          tags: ['历史文化', '古建筑', '白族风情', '摄影圣地', '慢生活'],
          description: '大理古城位于云南省大理白族自治州大理市，是白族的聚居地之一，拥有丰富的历史文化和美丽的自然风光。', 
          image: require('@/assets/treval/游客.jpg'),
          score: 4.5  // 新增评分字段（支持小数）
        },
        // 其他景区数据补充评分 ▼
        { 
          id: 2, 
          name: '丽江古城',
          tags: ['历史文化', '古建筑', '白族风情', '摄影圣地', '慢生活'],
          score: 4.2,
          description: '丽江古城位于云南省丽江市，以其独特的纳西族文化和美丽的自然风光而闻名。',
          image: require('@/assets/treval/wallhaven1.png') },
        { 
          id: 3,
          name: '玉龙雪山', 
          tags: ['历史文化', '古建筑', '白族风情', '摄影圣地', '慢生活'],
          description: '玉龙雪山位于云南省丽江市玉龙纳西族自治县，是纳西族人民心中的圣山，拥有壮观的雪山风光和丰富的生物多样性。',
          image: require('@/assets/treval/白山.jpg'),
          score: 4.8 
        },{ 
          id: 4, 
          name: '大理古城', 
          tags: ['世界遗产', '纳西文化', '酒吧街', '雪山观景'],
          description: '大理古城位于云南省大理白族自治州大理市，是白族的聚居地之一，拥有丰富的历史文化和美丽的自然风光。', 
          image: require('@/assets/treval/游客.jpg'),
          score: 4.5  // 新增评分字段（支持小数）
        },
        { 
          id: 5, 
          name: '元阳梯田',
          tags: ['世界遗产', '纳西文化', '酒吧街', '雪山观景'],
          score: 4.2,
          description: '哈尼元阳梯田。',
          image: require('@/assets/treval/梯田.jpg') },
        { 
          id: 6,
          name: '香格里拉', 
          tags: ['世界遗产', '纳西文化', '酒吧街', '雪山观景'],
          description: '寺庙。',
          image: require('@/assets/treval/寺庙.jpg'),
          score: 4.8 
        },
      ],
      carousels: [
          { id: 1, name: '大理古城', description: '大理古城位于云南省大理白族自治州大理市，是白族的聚居地之一，拥有丰富的历史文化和美丽的自然风光。', image: require('@/assets/treval/游客.jpg') },
          { id: 2, name: '丽江古城', description: '丽江古城位于云南省丽江市，以其独特的纳西族文化和美丽的自然风光而闻名。', image: require('@/assets/treval/carousel1.png') },
          { id: 3, name: '玉龙雪山', description: '玉龙雪山位于云南省丽江市玉龙纳西族自治县，是纳西族人民心中的圣山，拥有壮观的雪山风光和丰富的生物多样性。', image: require('@/assets/treval/carousel1.png') }
      ],
      activities: [  // 新增独立活动数据
            { id: 1, name: '篝火晚会', image: require('@/assets/treval/湖.jpg') },
            { id: 2, name: '民族歌舞', image: require('@/assets/treval/石林.jpg') },
            { id: 3, name: '手工体验', image: require('@/assets/treval/梯田.jpg') },
      ]
      }
    },
      methods: {
        setPageTitle() {
          document.title = '景区介绍'; // 动态设置页面标题
        },
        navigateToHome() {
          this.$router.push('/treval/welcome');
        },
        navigateToIntro() {
        this.$router.push('/treval/intro');
        },
        navigateToCommend() {
          this.$router.push('/treval/commend');
        },
        navigateToSearch() {
          this.$router.push('/treval/search');
        },
        viewDetails(id) {
          this.$router.push(`/treval/scenic/${id}`);
        }
      }
    }
</script>

<style scoped>
.welcome-container {
  background-color: #abc6b5;
  overflow-x: hidden; /* 防止横向滚动 */
  overflow: hidden;
  
  /* 新增全局宽度约束 */
  * {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* 通用图片约束 */
.welcome-container img {
  max-width: 100%;
  height: auto;
  display: block; /* 消除图片底部间隙 */
}

.header {
  display: flex;
  justify-content: space-between;
  padding: 0 50px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999; /* 提升层级确保覆盖所有元素 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); /* 添加阴影增强层次感 */
  background: rgba(109, 184, 222, 0.429);
  backdrop-filter: blur(5px); /* 毛玻璃效果 */
  font-weight: bold;
}

/* 优化菜单项样式 */
.el-menu {
  background: transparent !important; /* 透明背景 */
}

.el-menu-item {
  font-size: 18px !important;  /* 加大字体 */
  font-weight: 600 !important; /* 加粗字体 */
  padding: 0 20px !important; /* 增加间距 */
  transition: all 0.3s !important;
}

.el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important; /* 悬停效果 */
  border-bottom: 2px solid #ffd04b !important; /* 下划线指示 */
}

.el-menu-item.is-active {
  color: #ffd04b !important;
  border-bottom: 2px solid #ffd04b !important;
  background-color: rgba(173, 216, 230, 0.3) !important; /* 淡蓝色半透明背景 */
  backdrop-filter: blur(8px) !important; /* 磨砂玻璃效果 */
  -webkit-backdrop-filter: blur(8px) !important; /* 兼容Safari */
  transition: all 0.3s !important; /* 添加过渡动画 */
}

.el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-bottom: 2px solid #ffd04b !important;
  backdrop-filter: blur(4px) !important; /* 悬停时添加轻度模糊 */
  -webkit-backdrop-filter: blur(4px) !important;
}

.logo {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 24px;
  img {
    height: 40px;
    margin-right: 15px;
  }
}

.scenic-card {
  transition: transform 0.3s;
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.scenic-card:hover {
  transform: translateY(-10px);
}

.scenic-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.scenic-info {
  padding: 20px;
}

.scenic-info h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.scenic-info p {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

/* 新增容器布局 */
.scenic-container {
  display: flex;
  gap: 30px;
  padding-top: 1vh;
  padding-left: 5vw;
  padding-right: 32%;
}

/* 左侧列表宽度 */
.scenic-list {
  flex: 1; /* 改为自适应剩余空间 */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3vw;
  margin-top: 3vh;
  margin-right: 2vw; /* 增加右侧间距 */
}

/* 优化标签样式 */
.scenic-tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1vw;
  margin-top: 10vh; /* 调整顶部间距 */
  margin-left: 3vw;
  padding: 0 5%;
  max-width: 65vw;
}

.scenic-tag {
  margin-bottom: 0; /* 移除底部间距 */
}

.scenic-tag .el-button {
  margin-bottom: 0; /* 移除底部间距 */
  margin-right: 1vw; /* 添加右侧间距 */
  padding: 10px 20px; /* 增加按钮内边距 */
  border-radius: 20px; /* 圆角按钮 */
  background-color: rgba(241, 198, 78, 0.5); /* 按钮背景色，半透明0.2 */
  color: rgba(224, 77, 77, 0.7) ; /* 按钮文字颜色 */
  border: none; /* 移除边框 */
  transition: background-color 0.3s; /* 添加过渡效果 */
  backdrop-filter: blur(10px); /* 添加毛玻璃效果 */
  -webkit-backdrop-filter: blur(10px); /* 兼容Safari */
  border-radius: 12px; /* 圆角 */
  padding: 10px; /* 内边距 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* 阴影 */
  font-weight: bold;
}

.scenic-tag .el-button:hover {
  background-color: #ffab00; /* 悬停时的背景色 */
}

/* 右侧固定轮播 */
.sticky-carousel {
  flex: 4;
  position: fixed; 
  right: 0.6vw;     
  top: 160px;      
  width: 30%;     
  z-index: 999;
}

.activity-carousel-container {
  position: relative;    
  margin-top: 60px;    
}

.top-carousel {
  position: absolute;
  top: -40px; /* 上移标签位置 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2; /* 确保在轮播组件上方 */
  font-weight: 1000;
  font-size: 20px;
  color: rgba(27, 109, 136, 0.6);
}

.carousel-card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  height: 500px; /* 新增固定高度 */
}

.carousel-image {
  width: 100%;
  height: 70%;    /* 减少图片区域高度 */
  object-fit: cover;
  /* 移除定位属性 */
}

</style>
